<template>
  <div class="app-container">
    <el-card>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">主页</el-breadcrumb-item>
        <el-breadcrumb-item>订单管理</el-breadcrumb-item>
        <el-breadcrumb-item>订单列表</el-breadcrumb-item>
      </el-breadcrumb>
    </el-card>
    <el-card class="order-bd" style="margin-top:20px">
      <div class="order-input1">
        <div>
          <span>店铺名称：</span>
          <el-input v-model="orderData.shop_name" placeholder="请输入内容" size="small" />
        </div>
        <div>
          <span>订单号：</span>
          <el-select v-model="orderData.ordernum" placeholder="请选择" size="small">
            <el-option
              v-for="item in $store.state.order.orderlist"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </div>
        <div style="margin:0">
          <span>配送方式：</span>
          <el-select v-model="orderData.delivery_meth" placeholder="请选择" size="small">
            <el-option
              v-for="item in orderData.distributlist"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </div>
      </div>
      <div class="order-input2">
        <div class="order-input2-div">
          <span>手机号：</span>
          <el-select v-model="orderData.ctct_tel" placeholder="请选择" size="small">
            <el-option
              v-for="ctct_tel in $store.state.order.phonelist"
              :key="ctct_tel"
              :label="ctct_tel"
              :value="ctct_tel"
            />
          </el-select>
        </div>
        <div class="order-input2-div">
          <div class="order-input2-btn">
            <el-button type="primary" size="small" @click="btnSearch">查询</el-button>
            <el-button size="small" @click="resetData">重置</el-button>
          </div>
        </div>
      </div>
      <el-row>
        <el-col :span="22" @click.native="btnState($event)">
          <el-button type="primary" size="small" @click="getOrderData">全部</el-button>
          <el-button size="small">待支付</el-button>
          <el-button size="small">待配送</el-button>
          <el-button size="small">待发货</el-button>
          <el-button size="small">已收货</el-button>
          <el-button size="small">售后退款</el-button>
          <el-button size="small">已经取消</el-button>
          <el-button size="small">已经完成</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" size="small" style="margin-left:20px" @click="handle">+ 新增</el-button>
        </el-col>
      </el-row>
      <el-table
        :data="$store.state.order.handleOrderData"
        style="width: 100%;margin-top:20px"
      >
        <el-table-column
          prop="shop_name"
          width="120"
          label="店铺名称"
        />
        <el-table-column
          prop="user_name"
          label="商户名"
          width="120"
        />
        <el-table-column
          prop="id"
          label="订单号"
          width="120"
        />
        <el-table-column
          prop="ordr_time"
          label="下单时间"
          width="200"
        />
        <el-table-column
          prop="ordr_amt"
          label="订单金额"
          width="120"
        />
        <el-table-column
          prop="delivery_meth"
          label="配送方式"
          width="120"
        />
        <el-table-column
          prop="ctct_name"
          label="收货人/提货人"
          width="120"
        />
        <el-table-column
          prop="sts"
          label="状态"
          width="120"
        />
        <el-table-column
          fixed="right"
          label="操作"
          width="150"
        >
          <template #default="{row}">
            <el-button type="text" size="small" @click="handleClick(row.id)">查看订单</el-button>
            <el-button type="text" size="small" @click="delOrder(row.id)">删除</el-button>
            <el-button type="text" size="small" @click="handleEdit(row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row style="margin:30px 10px 0 10px;">
        <el-col :span="8">
          <div>
            <span style="margin-right:10px">共{{ $store.state.order.page.total }}条记录</span>
            <span>第{{ $store.state.order.page.page }}/{{ $store.state.order.page.total }}页</span>
          </div>
        </el-col>
        <el-col :span="16">
          <el-pagination
            background
            :current-page="$store.state.order.page.page"
            :page-sizes="[10, 15, 20, 30]"
            :page-size="$store.state.order.page.size"
            layout="total, prev, pager, next, sizes,jumper"
            :total="$store.state.order.page.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-col>
      </el-row>

      <!-- 订单详情 -->
      <order-detail />
      <!-- 新增/编辑 -->
      <add-order />
    </el-card>
  </div>
</template>

<script>
import OrderDetail from '@/views/orderlist/components/orderdetail.vue'
import AddOrder from '@/views/orderlist/components/addorder.vue'
import { getOrderListOfState, getOrderListOfConditions, delTheOrder, getOrderListOfPage } from '@/api/order.js'

export default {
  components: { OrderDetail, AddOrder },
  data() {
    return {
      orderData: {
        shop_name: '', // 店铺名称
        ordernum: '', // 订单号
        orderlist: [], // 订单列表
        delivery_meth: '', // 配送方式
        distributlist: ['到店自取', '同城配送', '区域配送'], // 配送方式列表
        ctct_tel: '',
        phonelist: [],
        options: [],
        ordr_time: ''
      },
      tableData: []
    }
  },
  created() {
    this.getOrderData()
  },
  methods: {
    // 编辑选中的订单
    handleEdit(data) {
      this.$store.state.order.orderId = data.id
      this.$store.state.order.shopId = data.shop_id
      this.$store.state.order.showAddDiglog = true
    },
    // 删除选中的订单
    delOrder(id) {
      this.$confirm('确认删除吗？').then((res) => {
        delTheOrder(id).then(() => {
          this.$message.success('删除成功')
          this.getOrderData()
        }).catch((err) => {
          this.$message.error(err.message)
        })
      }).catch(() => {
        this.$message.error('取消删除')
      })
    },
    // 重置搜索内容
    resetData() {
      if (this.orderData.shop_name || this.orderData.ordernum || this.orderData.delivery_meth || this.orderData.ctct_tel) {
        setTimeout(() => {
          this.getOrderData()
        }, 200)

        this.orderData = {
          shop_name: '', // 店铺名称
          ordernum: '', // 订单号
          orderlist: [], // 订单列表
          delivery_meth: '', // 配送方式
          distributlist: ['到店自取', '同城配送', '区域配送'], // 配送方式列表
          ctct_tel: '',
          phonelist: [],
          options: [],
          ordr_time: ''
        }
      }
    },
    // 根据条件搜索订单列表
    btnSearch() {
      var obj = {}
      // 筛选出搜索的内容
      for (var k in this.orderData) {
        if (this.orderData[k] instanceof Array || this.orderData[k] === '') {
          console.log('过滤掉')
        } else {
          obj[k] = this.orderData[k]
        }
      }
      getOrderListOfConditions(obj).then((res) => {
        this.$store.state.order.page.total = res.data.length
        this.$store.state.order.handleOrderData = res.data
      }).catch((err) => {
        this.$message.error(err.message)
      })
    },
    btnState(e) {
      const newArr = []
      const newArr1 = []
      getOrderListOfState(e.target.innerText).then((res) => {
        this.$store.state.order.page.total = res.data.length
        res.data.forEach(value => {
          newArr.push(value.id)
          if (value.ctct_tel !== '' && newArr1.indexOf(value.ctct_tel) === -1) {
            newArr1.push(value.ctct_tel)
          }
        })
        this.orderData.orderlist = newArr
        this.orderData.phonelist = newArr1
        this.$store.state.order.handleOrderData = res.data
        return Promise.resolve(this.$store.state.order.handleOrderData)
      }).then((res) => {
        if (this.orderData.shop_name || this.orderData.ordernum || this.orderData.delivery_meth || this.orderData.ctct_tel) {
          if (this.orderData.shop_name) {
            this.$store.state.order.handleOrderData = res.filter(value => value.shop_name === this.orderData.shop_name)
            this.$store.state.order.page.total = this.$store.state.order.handleOrderData.length
          } else if (this.orderData.ordernum) {
            this.$store.state.order.handleOrderData = res.filter(value => value.ordernum === this.orderData.ordernum)
            this.$store.state.order.page.total = this.$store.state.order.handleOrderData.length
          } else if (this.orderData.delivery_meth) {
            this.$store.state.order.handleOrderData = res.filter(value => value.delivery_meth === this.orderData.delivery_meth)
            this.$store.state.order.page.total = this.$store.state.order.handleOrderData.length
          } else if (this.orderData.ctct_tel) {
            this.$store.state.order.handleOrderData = res.filter(value => value.ctct_tel === this.orderData.ctct_tel)
            this.$store.state.order.page.total = this.$store.state.order.handleOrderData.length
          }
        }
      }).catch((err) => {
        this.$message.error(err.message)
      })
    },
    // 获取订单列表数据
    getOrderData() {
      this.$store.dispatch('order/getOrderData').then(() => {
        this.getOrderDataOfPage()
      })
    },
    // 根据页码和数目获取订单列表数据
    getOrderDataOfPage() {
      getOrderListOfPage(this.$store.state.order.page).then(res => {
        this.$store.state.order.handleOrderData = res.data
      })
    },
    // 新增或编辑页面显示
    handle() {
      this.$store.state.order.showAddDiglog = true
    },
    handleClick(id) {
      this.$store.state.order.orderId = id
      this.$store.state.order.showOrderDetail = true
    },
    handleSizeChange(size) {
      this.$store.state.order.page.size = size
      this.getOrderDataOfPage()
    },
    handleCurrentChange(current) {
      this.$store.state.order.page.page = current
      this.getOrderDataOfPage()
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container {
    min-width: 1150px;
}
.order-input1 {
    display: flex;
    margin-bottom: 20px;
    div {
        flex: 1;
        display: flex;
        align-items: center;
        margin-right: 20px;
        .el-select {
            flex: 1;
            // width: 120px;
        }
        .el-date-picker {
            flex: 1;
        }
    }
}
.order-input2 {
    display: flex;
    margin-bottom: 20px;
    .order-input2-div {
        flex: 1;
        display: flex;
        align-items: center;
        margin-right: 20px;
        .el-input {
            flex: 1;
            // width: 120px;
        }
        .order-input2-btn {
            width: 100%;
            display: flex;
            justify-content: flex-end;
        }
    }
}
</style>
